<template>
	<div class="app-container">
		<div id="checkRateRange" style="width: 100%;height: 300%;"></div>
	</div>
</template>

<script>
	
	import {
		checkRate
	} from '@/api/dataview'
	
	import * as echarts from 'echarts'

	export default {
		name: 'checkRate',
		data() {
			return {
				options:{
					title: {
						text: '请验模型'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a}<br/>{b}'
					},
					legend: {
						data: ['请验', '分发', '结论']
					},
					series: [{
						name: '批次',
						type: 'funnel',
						left: '10%',
						top: 60,
						bottom: 30,
						max: 100,
						minSize: '0%',
						maxSize: '100%',
						sort: 'descending',
						gap: 2,
						label: {
							show: true,
							position: 'inside'
						},
						labelLine: {
							length: 10,
							lineStyle: {
								width: 1,
								type: 'solid'
							}
						},
						itemStyle: {
							borderColor: '#fff',
							borderWidth: 1
						},
						emphasis: {
							label: {
								fontSize: 20
							}
						},
						data: []
					}]
				}
			}
		},
		mounted() {
			this.initChart()
		},
		methods: {
			initChart() {
				checkRate().then(res=>{
					var myChart = echarts.init(document.getElementById('checkRateRange'));
					this.options.series[0].data = res.rates
					myChart.setOption(this.options);
				})
			}
		},
	}
</script>
